<!--
/**
* Author: zyf
* Date: 2021-11-29 11:56
* Desc: GcPopup
*/
-->
<template>
  <view class="refund-box flex-m">
    <view class="df-center tc" @click="openPopup">
      <yy-check :check="feChecked" :size="22" :shape="'circle'" @change="changeFeChecked"></yy-check>
      我已阅读并同意<a href="javascript:;" class="mainColor">《商品不支持退款协议》</a>
    </view>
    <zm-popup v-model="visible" :round="20" :closeable="false" mode="center">
      <view class="refund-popup flex flex-col pt30">
        <view class="refund-popup__header tc"> 商品不支持退款协议 </view>
        <!-- <view class="refund-popup__content overflow-auto">{{ agreement }}</view> -->
        <rich-text class="refund-popup__content overflow-auto" :nodes="agreement" />
        <view class="footer pt10">
          <view class="tc fs24 mb10">
            <view class="df-center pl30 fc-gray">
              <yy-check :check="agreementChecked" @change="feCheck" class="mr5"></yy-check>
              我已阅读并同意《商品不支持退款协议》
            </view>
            <view class="df-center pl30 fc-gray mt10">
              <yy-check :check="defaultChecked" @change="deCheck" class="mr5"></yy-check>
              下回不再提示,默认同意本协议
            </view>
          </view>
          <view class="refund-popup__btn flex flex-c tc plr30">
            <yy-button type="primary" custom-style="font-size:30rpx" custom-class="flex-1 mr20" shape="circle" @click="changeAgree('0')"> 不接受 </yy-button>
            <yy-button custom-style="font-size:30rpx" :disabled="!agreementChecked" type="primary" custom-class="flex-1 " shape="circle" @click="changeAgree('1')">
              阅读并同意
            </yy-button>
          </view>
        </view>
      </view>
    </zm-popup>
  </view>
</template>

<script>
  // #ifdef MP-ALIPAY
  import parseHtml from '@/utils/htmlParser'
  // #endif
  import ZmPopup from '@/commons/ZmPopup'

  export default {
    name: 'refund-popup',
    components: { ZmPopup },
    props: {
      value: Boolean,
      isAcceptType: {
        type: String,
        default() {
          return '0'
        }
      }
    },
    data() {
      return {
        agreementChecked: false,
        defaultChecked: false,
        feChecked: false,
        agreement: '',
        visible: false
      }
    },
    computed: {
      // feChecked: {
      //   get() {
      //     return this.value
      //   },
      //   set(val) {
      //     this.$emit('input', val)
      //   }
      // }
    },
    mounted() {
      this.init()
    },
    methods: {
      init() {
        this.getAcceptData()
        console.log('init', this.feChecked, this.agreementChecked, this.defaultChecked)
      },
      // 初始化方法
      async getAgreement() {
        const res = await uni.$api.user.getAgreement()
        // #ifndef MP-ALIPAY
        this.agreement = res.agreement
        // #endif
        // #ifdef MP-ALIPAY
        this.agreement = parseHtml(res.agreement)
        console.log('  this.agreement = ', this.agreement)
        // #endif
      },
      openPopup() {
        this.visible = true
        this.getAgreement()
      },
      async getAcceptData() {
        console.log('getAcceptData', this.feChecked)
        const res = await uni.$api.user.getAcceptData({
          isAcceptType: this.isAcceptType
        })
        this.feChecked = res.isAccept === '1'
        this.agreementChecked = res.isAccept === '1'
        this.defaultChecked = res.isAccept === '1'
      },
      changeFeChecked() {
        console.log('changeFeChecked start', this.feChecked, this.agreementChecked, this.defaultChecked)
        // this.feChecked = !this.feChecked
        if (this.feChecked) {
          this.feChecked = false
          this.agreementChecked = false
          this.defaultChecked = false
        } else {
          this.feChecked = true
          this.agreementChecked = true
          this.defaultChecked = true
        }
        console.log('changeFeChecked end', this.feChecked, this.agreementChecked, this.defaultChecked)
      },
      async changeChecked(agree) {
        // if (!agree) this.feCheck()
        if (agree === '0') {
          this.defaultChecked = false
        }
        if (this.defaultChecked || agree === '0') {
          uni.$api.user
            .acceptAgreement({
              isAccept: agree || (this.agreementChecked ? '1' : '0'),
              isAcceptType: this.isAcceptType
            })
            .then((res) => {
              if (res === '1') {
                this.agreementChecked = true
                this.feChecked = true
              } else {
                this.agreementChecked = false
                this.feChecked = false
              }
            })
        } else {
          if (agree === '1') {
            this.agreementChecked = true
            this.feChecked = true
          } else {
            this.agreementChecked = false
            this.feChecked = false
          }
        }
      },
      feCheck() {
        console.log('feCheck', this.agreementChecked)
        this.agreementChecked = !this.agreementChecked
      },
      deCheck() {
        console.log('deCheck', this.defaultChecked)
        this.defaultChecked = !this.defaultChecked
      },
      changeAgree(agree) {
        this.changeChecked(agree)
        this.visible = false
      }
    }
  }
</script>
<style lang="scss" scoped>
  .refund-box {
    padding: 0 30rpx;
    height: 90rpx;
    background: #fff;
    // border-radius: 18rpx;
  }
  .refund-popup {
    width: 6.3 * 100rpx;
    &__header {
      padding: 0.2 * 100rpx;
      box-sizing: border-box;
      font-size: 0.32 * 100rpx;
      font-weight: bold;
      // background: #f1f1f1;
    }
    &__icon {
      width: 0.52 * 100rpx;
      height: 0.52 * 100rpx;
    }
    &__qrcode {
      display: block;
      width: 4 * 100rpx;
      height: 4 * 100rpx;
    }
    &__content {
      height: 5 * 100rpx;
      padding: 0.1 * 100rpx 0.2 * 100rpx 0.3 * 100rpx;
      color: #333;
      font-size: 0.28 * 100rpx;
      text-indent: 2em;
      line-height: 1.6;
      box-sizing: border-box;
    }
    &__btn {
      width: 100%;
      text-align: center;
      // border-top: 1px solid #ededed;
      line-height: 0.96 * 100rpx;
      font-size: 0.34 * 100rpx;
      // font-weight: bold;
      padding: 0.2 * 100rpx;
      box-sizing: border-box;
    }
    &__img {
      position: relative;
    }
    &__mark {
      width: 100%;
      height: 100%;
      background: rgba($color: #fff, $alpha: 0.82);
      position: absolute;
      top: 0;
      left: 0;
    }
    &__status {
      width: 1.38 * 100rpx;
      height: 1.38 * 100rpx;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }
</style>
